﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Resource/Jquery/jquery-1.10.2.js"></script>

    <style type="text/css">
        body {
            text-align: center;
        }

        .c {
            margin-right: auto;
            margin-left: auto;
            height: 200px;
            width: 400px;
            border: 1px solid red;
            vertical-align: middle;
            line-height: 200px;
        }

        .d {
            margin-top: auto;
            margin-right: auto;
        }

        .center {
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: 200px;
            margin-top: -200px;
            width: 300px;
            height: 400px;
            background-color: #F00;
        }
    </style>
</head>
<body style="height: 2000px;">

    <div class="center"></div>
    <div style="clear:both;"></div>
    <div id="d1" style="border: 1px solid blue; position: absolute; background-color: white; color: black; width: 100px; height: 100px; top:300px; left: 1200px;">
        我就在这，哪也不去!<br />
        我就在这，哪也不去!<br />
    </div>
    <div id="d2" style="border: 1px solid yellow; position: absolute; background-color: white; color: black; width: 200px; height: 200px; top: 150px; left: 1100px; z-index: 10;">
        我也在这，看会不会被盖住?<br />
        我也在这，看会不会被盖住?<br />
        我也在这，看会不会被盖住?<br />
        我也在这，看会不会被盖住?<br />
        我也在这，看会不会被盖住?<br />
        我也在这，看会不会被盖住?<br />
        我也在这，看会不会被盖住?<br />
        我也在这，看会不会被盖住?<br />
        我也在这，看会不会被盖住?<br />
        我也在这，看会不会被盖住?<br />
        我也在这，看会不会被盖住?<br />
    </div>
</body>
</html>
<script type="text/javascript">
    var dt1 = getAbsoluteTop(document.getElementById("d1"));
    var dt2 = getAbsoluteTop(document.getElementById("d2"));
    $("#d1").css("display", "none");
    $("#d2").css("display", "none");
    window.onscroll = function () {
        var st = $(window).scrollTop();
        if (document.body.scrollTop > 450) {
            $("#d1").css("display", "block");
        }
        if (document.body.scrollTop > 100) {
            $("#d2").css("display", "block");
        }
        else {
            $("#d1").css("display", "none");
            $("#d2").css("display", "none");
        }

        $("#d2").css({ "z-index": "12", "top": st + dt2 });
        $("#d1").css({ "z-index": "1", "top": st + dt1 });
    }

    function getAbsoluteLeft(el) {
        var o = el;
        oLeft = o.offsetLeft;
        while (o.offsetParent != null) {
            oParent = o.offsetParent;
            oLeft += oParent.offsetLeft;
            o = oParent;
        }
        return oLeft;
    }

    function getAbsoluteTop(el) {
        var o = el;
        oTop = o.offsetTop;
        while (o.offsetParent != null) {
            oParent = o.offsetParent;
            oTop += oParent.offsetTop;
            o = oParent;
        }
        return oTop;
    }
</script>
